<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>ifree</title>


    <script src="/static/js/jquery-3.2.1.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">

    <link rel="stylesheet" href="/static/css/swiper-3.4.2.min.css">
    <script src="/static/js/swiper-3.4.2.min.js"></script>

    <style>
        #header_navbar{
            background:#6495ED;
        }
        #header_navbar a{
            color: white;
        }

        #text{
            width:100%;
            z-index: 10;
            position: absolute;
            text-align: center;
            top: 100px;
            -webkit-animation: myText 1s;
            -o-animation: myText 1s;
            animation: myText 1s;
        }
        
        @-webkit-keyframes myText {
            from{
                top: 0;
                opacity: 0;
            }
            to{
                top: 100px;
                opacity: 1;
            }
        }

        .imgs{
            margin-top: 30px;
            position: relative;
        }

        .img{
            z-index: 1;
        }

        .text1{
            width: 100%;
            z-index: 10;
            position: absolute;
            text-align: center;
            top: 25px;
        }

    </style>

</head>
<body>

    <div class="">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide slide1" style="position: relative;">
                    <img width="100%" style="z-index: 1;position: absolute;" src="/static/img/h1.jpg">
                    <div id="text">
                        <h1>I just want to be free in my world</h1>
                        <h3>我想要在我的世界，自由自在</h3>
                    </div>
                </div>
                <div class="swiper-slide slide2">
                    <img width="100%" src="/static/img/h2.jpg">

                </div>
                <div class="swiper-slide slide3">
                    <img width="100%" src="/static/img/h3.jpg">
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="imgs col-md-6 col-sm-6 col-xs-6">
                    <div class="text1">
                        <h3>心之所向</h3>
                        <p>曾听人说，回忆是一座桥，却是通向寂寞的牢。</p>
                    </div>
                    <img width="100%" class="img" src="/static/img/bg1.jpg">
                </div>
                <div class="imgs col-md-6 col-sm-6 col-xs-6">
                    <div class="text1">
                        <h3>找回自己</h3>
                        <p>快乐给了你，寂寞给自己。</p>
                    </div>
                    <img width="100%" class="img" src="/static/img/bg2.jpg">
                </div>
                <div class="imgs col-md-6 col-sm-6 col-xs-6">
                    <div class="text1">
                        <h3>追求美好</h3>
                        <p>经不住似水流年，逃不过此间少年。</p>
                    </div>
                    <img width="100%" class="img" src="/static/img/bg3.jpg">
                </div>
                <div class="imgs col-md-6 col-sm-6 col-xs-6">
                    <div class="text1">
                        <h3>似曾相识</h3>
                        <p>我们好像在哪见过，你记得吗？</p>
                    </div>
                    <img width="100%" class="img" src="/static/img/bg4.jpg">
                </div>

            </div>
        </div>

    </div>


    <script>
        var mySwiper = new Swiper('.swiper-container',{
            pagination: '.swiper-pagination',
            autoHeight: 'true',
        });
    </script>

</body>
</html>